<template>
  <div class="register-wrap">
    <div class="logo">腾达旅行</div>
    <div class="register-box">
      <div class="title">
        <span><i class="el-icon-message"></i>使用邮箱注册</span>
        <span class="tips">已有帐号? <router-link to="/login">前往登录</router-link></span>
      </div>
      <div v-if="!done" class="form">
        <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="0px">
          <el-form-item prop="email">
            <el-input v-model="registerForm.email" placeholder="邮箱地址" />
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="registerForm.name" placeholder="姓名" />
          </el-form-item>
          <el-form-item prop="phone">
            <el-input v-model="registerForm.phone" placeholder="联系电话" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" type="password" placeholder="登录密码" />
          </el-form-item>
          <el-form-item prop="passwordCopy">
            <el-input v-model="registerForm.passwordCopy" type="password" placeholder="确认登录密码" />
          </el-form-item>
          <div>
            <div class="line-wrap">
              <span class="line"></span>
              <a target="_blank" class="text links">《腾达旅行服务协议》</a>
            </div>
            <el-button type="primary" class="full" :loading="loading" @click="register()">同意协议并提交注册</el-button>
          </div>
        </el-form>
      </div>
      <div class="success" v-else>
        <div>您的账号已经注册成功</div>
        <el-button type="primary" @click="gotoLoginPage()">前往登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Member } from '@/store/api'

export default {
  data: function () {
    let validatePwdCopy = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    // let isEmailDuplicate = (rule, value, callback) => {
    //   if (value) {
    //     callback(new Error('邮箱已被使用'))
    //   } else {
    //     callback()
    //   }
    // }

    return {
      done: false,
      registerForm: {
        email: '',
        phone: '',
        password: ''
      },
      rules: {
        email: [
          { max: 32, message: '长度不能超过32', trigger: 'blur' },
          { type: 'email', required: true, message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        name: [
          { required: true, max: 16, message: '请填写您的姓名(16个字符以内)', trigger: 'blur' }
        ],
        phone: [
          { required: true, min: 7, max: 16, message: '请填写正确的手机/固话', trigger: 'blur' }
        ],
        password: [
          { required: true, max: 16, min: 8, message: '请输入密码(8-16个字符)', trigger: 'blur' }
        ],
        passwordCopy: [
          { validator: validatePwdCopy, trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    register() {
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          var payload = Object.assign({}, this.registerForm)
          Member.register(payload).then(() => {
            this.done = true
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    gotoLoginPage() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss">
#app {
  overflow-y: scroll;
}

.register-wrap {
  position: relative;

  .logo {
    text-align: center;
    font-size: 28px;
    color: #000;
    padding-top: 30px;
    padding-bottom: 26px;
  }

  .register-box {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding-bottom: 36px;

    .title {
      text-align: left;
      padding: 24px 20px 16px 20px;
      font-size: 20px;
      color: #333;
      font-weight: 400;
      border-bottom: 1px solid #e7e7e7;
      i {
        color: #20A0FF;
        padding-right: 8px;
      }

      .tips {
        float: right;
        font-size: 15px;
        line-height: 25px;
        a {
          color: #2277da;
        }
      }
    }

    .form {
      width: 420px;
      margin: 0 auto;
      padding-top: 40px;
      min-height: 360px;

      input {
        width: 100%;
        font-size: 14px;
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 2px;
        color: #333;
        vertical-align: middle;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 40px;
        line-height: 1.2;
        padding-top: 11px;
        padding-bottom: 9px;

        &:hover {
          border-color: #b3b3b3;
          outline: 0
        }

        &:focus {
          border-color: #00a2ff;
          outline: 0
        }
      }

      button.full {
        width: 100%;
        height: 40px;
        font-size: 17px;
        -webkit-appearance: none;
      }
    }

    .success {
      font-size: 20px;
      line-height: 36px;
      padding: 50px 0;
      min-height: 200px;
      vertical-align: middle;
      text-align: center;

      div {
        margin: 0 auto;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
